<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能应用中心</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #4361ee;
            --secondary-color: #3a0ca3;
            --accent-color: #4cc9f0;
            --success-color: #06d6a0;
            --danger-color: #ef476f;
            --dark-bg: #121212;
            --card-bg: #1e1e1e;
            --text-color: #f5f5f5;
            --border-radius: 16px;
            --transition: all 0.2s ease;
        }

        /* 主题变量 */
        .theme-dark {
            --bg-color: #121212;
            --card-bg: #1e1e1e;
            --text-color: #f5f5f5;
            --secondary-text: #b0b0b0;
            --border-color: rgba(255, 255, 255, 0.08);
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            --hover-bg: rgba(255, 255, 255, 0.05);
        }

        .theme-light {
            --bg-color: #f8fafc;
            --card-bg: #ffffff;
            --text-color: #2d3748;
            --secondary-text: #718096;
            --border-color: rgba(0, 0, 0, 0.06);
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
            --hover-bg: rgba(0, 0, 0, 0.02);
        }

        .theme-blue {
            --bg-color: #1a237e;
            --card-bg: #283593;
            --text-color: #e8eaf6;
            --secondary-text: #9fa8da;
            --border-color: rgba(255, 255, 255, 0.1);
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            --hover-bg: rgba(255, 255, 255, 0.05);
        }

        .theme-green {
            --bg-color: #1b5e20;
            --card-bg: #2e7d32;
            --text-color: #e8f5e9;
            --secondary-text: #a5d6a7;
            --border-color: rgba(255, 255, 255, 0.1);
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            --hover-bg: rgba(255, 255, 255, 0.05);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            min-height: 100vh;
            padding: 20px;
            transition: var(--transition);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding: 20px 0;
            border-bottom: 1px solid var(--border-color);
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .logo i {
            font-size: 32px;
            color: var(--accent-color);
        }

        .logo h1 {
            font-size: 28px;
            font-weight: 700;
            background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .header-controls {
            display: flex;
            gap: 15px;
            align-items: center;
        }

        .search-bar {
            display: flex;
            align-items: center;
            background: var(--card-bg);
            border-radius: 50px;
            padding: 10px 20px;
            width: 300px;
            box-shadow: var(--shadow);
            transition: var(--transition);
            border: 1px solid transparent;
        }

        .search-bar:focus-within {
            border-color: var(--accent-color);
            box-shadow: 0 0 0 3px rgba(76, 201, 240, 0.2);
        }

        .search-bar input {
            background: transparent;
            border: none;
            color: var(--text-color);
            width: 100%;
            padding: 5px 10px;
            font-size: 16px;
            outline: none;
        }

        .search-bar i {
            color: var(--accent-color);
        }

        .theme-selector {
            position: relative;
        }

        .theme-btn {
            background: var(--card-bg);
            border: none;
            color: var(--text-color);
            width: 44px;
            height: 44px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
            box-shadow: var(--shadow);
        }

        .theme-btn:hover {
            transform: scale(1.05);
            background: var(--hover-bg);
        }

        .theme-menu {
            position: absolute;
            top: 55px;
            right: 0;
            background: var(--card-bg);
            border-radius: var(--border-radius);
            padding: 12px;
            display: none;
            flex-direction: column;
            gap: 8px;
            width: 160px;
            box-shadow: var(--shadow);
            z-index: 100;
            border: 1px solid var(--border-color);
        }

        .theme-menu.show {
            display: flex;
            animation: fadeIn 0.2s ease;
        }

        .theme-option {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            border-radius: 10px;
            cursor: pointer;
            transition: var(--transition);
        }

        .theme-option:hover {
            background: var(--hover-bg);
        }

        .theme-color {
            width: 20px;
            height: 20px;
            border-radius: 50%;
        }

        .theme-dark .theme-color {
            background: #121212;
            border: 1px solid #333;
        }

        .theme-light .theme-color {
            background: #f8fafc;
            border: 1px solid #ddd;
        }

        .theme-blue .theme-color {
            background: #1a237e;
            border: 1px solid #3949ab;
        }

        .theme-green .theme-color {
            background: #1b5e20;
            border: 1px solid #388e3c;
        }

        .settings-btn {
            background: var(--card-bg);
            border: none;
            color: var(--text-color);
            width: 44px;
            height: 44px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
            box-shadow: var(--shadow);
        }

        .settings-btn:hover {
            transform: scale(1.05);
            background: var(--hover-bg);
        }

        .settings-menu {
            position: absolute;
            top: 55px;
            right: 0;
            background: var(--card-bg);
            border-radius: var(--border-radius);
            padding: 12px;
            display: none;
            flex-direction: column;
            gap: 8px;
            width: 200px;
            box-shadow: var(--shadow);
            z-index: 100;
            border: 1px solid var(--border-color);
        }

        .settings-menu.show {
            display: flex;
            animation: fadeIn 0.2s ease;
        }

        .settings-option {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            border-radius: 10px;
            cursor: pointer;
            transition: var(--transition);
        }

        .settings-option:hover {
            background: var(--hover-bg);
        }

        .categories {
            display: flex;
            gap: 12px;
            margin-bottom: 30px;
            overflow-x: auto;
            padding-bottom: 10px;
            scrollbar-width: none;
        }

        .categories::-webkit-scrollbar {
            display: none;
        }

        .category-btn {
            background: var(--card-bg);
            border: none;
            color: var(--text-color);
            padding: 10px 20px;
            border-radius: 50px;
            cursor: pointer;
            transition: var(--transition);
            white-space: nowrap;
            font-weight: 500;
            box-shadow: var(--shadow);
            border: 1px solid transparent;
        }

        .category-btn.active, .category-btn:hover {
            background: var(--primary-color);
            box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
        }

        .apps-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }

        .app-card {
            background: var(--card-bg);
            border-radius: var(--border-radius);
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
            position: relative;
            box-shadow: var(--shadow);
            border: 1px solid transparent;
        }

        .app-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
            border-color: var(--accent-color);
        }

        .app-icon {
            width: 64px;
            height: 64px;
            border-radius: 18px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            background: rgba(255, 255, 255, 0.1);
            transition: var(--transition);
        }

        .app-card:hover .app-icon {
            transform: scale(1.05);
        }

        .app-name {
            font-size: 14px;
            text-align: center;
            font-weight: 500;
        }

        .actions {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
        }

        .action-btn {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 50px;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 500;
            box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
        }

        .action-btn:hover {
            background: var(--secondary-color);
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(67, 97, 238, 0.4);
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(5px);
        }

        .modal-content {
            background: var(--card-bg);
            border-radius: var(--border-radius);
            width: 90%;
            max-width: 500px;
            padding: 30px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            border: 1px solid var(--border-color);
            transform: scale(0.9);
            opacity: 0;
            transition: all 0.3s ease;
        }

        .modal.show .modal-content {
            transform: scale(1);
            opacity: 1;
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .modal-header h2 {
            font-size: 24px;
            color: var(--accent-color);
        }

        .close-modal {
            background: none;
            border: none;
            color: var(--text-color);
            font-size: 24px;
            cursor: pointer;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }

        .close-modal:hover {
            background: var(--hover-bg);
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }

        .form-group input, .form-group select {
            width: 100%;
            padding: 12px 16px;
            border-radius: 10px;
            border: 1px solid var(--border-color);
            background: var(--bg-color);
            color: var(--text-color);
            font-size: 16px;
            transition: var(--transition);
        }

        .form-group input:focus, .form-group select:focus {
            outline: none;
            border-color: var(--accent-color);
            box-shadow: 0 0 0 3px rgba(76, 201, 240, 0.2);
        }

        .submit-btn {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 10px;
            cursor: pointer;
            transition: var(--transition);
            width: 100%;
            font-size: 16px;
            font-weight: 500;
            box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
        }

        .submit-btn:hover {
            background: var(--secondary-color);
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(67, 97, 238, 0.4);
        }

        .edit-mode .app-card {
            cursor: move;
        }

        .drag-over {
            border: 2px dashed var(--accent-color);
        }

        .toast {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: var(--primary-color);
            color: white;
            padding: 12px 25px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            transform: translateY(100px);
            opacity: 0;
            transition: var(--transition);
            z-index: 1000;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .toast.show {
            transform: translateY(0);
            opacity: 1;
        }

        .toast.success {
            background: var(--success-color);
        }

        .toast.error {
            background: var(--danger-color);
        }

        .confirm-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(5px);
        }

        .confirm-content {
            background: var(--card-bg);
            border-radius: var(--border-radius);
            width: 90%;
            max-width: 400px;
            padding: 30px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            border: 1px solid var(--border-color);
            text-align: center;
            transform: scale(0.9);
            opacity: 0;
            transition: all 0.3s ease;
        }

        .confirm-modal.show .confirm-content {
            transform: scale(1);
            opacity: 1;
        }

        .confirm-icon {
            font-size: 48px;
            color: var(--danger-color);
            margin-bottom: 20px;
        }

        .confirm-text {
            margin-bottom: 25px;
            font-size: 18px;
            line-height: 1.5;
        }

        .confirm-actions {
            display: flex;
            gap: 15px;
            justify-content: center;
        }

        .confirm-btn {
            padding: 10px 25px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            transition: var(--transition);
            flex: 1;
        }

        .confirm-cancel {
            background: var(--card-bg);
            color: var(--text-color);
            border: 1px solid var(--border-color);
        }

        .confirm-cancel:hover {
            background: var(--hover-bg);
        }

        .confirm-delete {
            background: var(--danger-color);
            color: white;
            box-shadow: 0 4px 12px rgba(239, 71, 111, 0.3);
        }

        .confirm-delete:hover {
            background: #e0355f;
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(239, 71, 111, 0.4);
        }

        .edit-mode-indicator {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--primary-color);
            color: white;
            padding: 8px 20px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 500;
            box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
            z-index: 100;
            display: none;
            align-items: center;
            gap: 8px;
        }

        .edit-mode .edit-mode-indicator {
            display: flex;
            animation: slideDown 0.3s ease;
        }

        .app-card .app-actions {
            position: absolute;
            top: 8px;
            right: 8px;
            opacity: 0;
            transition: var(--transition);
            display: flex;
            gap: 5px;
        }

        .edit-mode .app-actions {
            opacity: 1;
        }

        .app-action-btn {
            background: rgba(0, 0, 0, 0.7);
            color: white;
            border: none;
            border-radius: 50%;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 12px;
            transition: var(--transition);
            backdrop-filter: blur(10px);
        }

        .app-action-btn:hover {
            transform: scale(1.1);
        }

        .app-action-btn.delete {
            background: rgba(239, 71, 111, 0.8);
        }

        .app-action-btn.delete:hover {
            background: rgba(239, 71, 111, 1);
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes slideDown {
            from { opacity: 0; transform: translate(-50%, -20px); }
            to { opacity: 1; transform: translate(-50%, 0); }
        }

        @media (max-width: 768px) {
            header {
                flex-direction: column;
                gap: 20px;
            }
            
            .header-controls {
                width: 100%;
                justify-content: space-between;
            }
            
            .search-bar {
                width: 70%;
            }
            
            .apps-grid {
                grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
                gap: 15px;
            }
            
            .app-card {
                padding: 15px;
            }
            
            .app-icon {
                width: 56px;
                height: 56px;
                font-size: 24px;
            }
        }

        @media (max-width: 480px) {
            .apps-grid {
                grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
            }
            
            .app-icon {
                width: 50px;
                height: 50px;
                font-size: 22px;
            }
            
            .confirm-actions {
                flex-direction: column;
            }
        }
    </style>
</head>
<body class="theme-dark">
    <div class="container">
        <header>
            <div class="logo">
                <i class="fas fa-rocket"></i>
                <h1>智能应用中心</h1>
            </div>
            <div class="header-controls">
                <div class="search-bar">
                    <i class="fas fa-search"></i>
                    <input type="text" id="searchInput" placeholder="搜索应用...">
                </div>
                <div class="theme-selector">
                    <button class="theme-btn" id="themeBtn">
                        <i class="fas fa-palette"></i>
                    </button>
                    <div class="theme-menu" id="themeMenu">
                        <div class="theme-option theme-dark" data-theme="dark">
                            <div class="theme-color"></div>
                            <span>深色主题</span>
                        </div>
                        <div class="theme-option theme-light" data-theme="light">
                            <div class="theme-color"></div>
                            <span>浅色主题</span>
                        </div>
                        <div class="theme-option theme-blue" data-theme="blue">
                            <div class="theme-color"></div>
                            <span>蓝色主题</span>
                        </div>
                        <div class="theme-option theme-green" data-theme="green">
                            <div class="theme-color"></div>
                            <span>绿色主题</span>
                        </div>
                    </div>
                </div>
                <div class="settings">
                    <button class="settings-btn" id="settingsBtn">
                        <i class="fas fa-cog"></i>
                    </button>
                    <div class="settings-menu" id="settingsMenu">
                        <div class="settings-option" id="addAppOption">
                            <i class="fas fa-plus"></i>
                            <span>添加应用</span>
                        </div>
                        <div class="settings-option" id="editModeOption">
                            <i class="fas fa-edit"></i>
                            <span>编辑模式</span>
                        </div>
                        <div class="settings-option" id="resetAppsOption">
                            <i class="fas fa-redo"></i>
                            <span>重置应用</span>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <div class="categories">
            <button class="category-btn active" data-category="all">全部应用</button>
            <button class="category-btn" data-category="ai">AI工具</button>
            <button class="category-btn" data-category="shopping">购物</button>
            <button class="category-btn" data-category="video">视频</button>
            <button class="category-btn" data-category="music">音乐</button>
            <button class="category-btn" data-category="social">社交</button>
            <button class="category-btn" data-category="tools">工具</button>
        </div>

        <div class="apps-grid" id="appsGrid">
            <!-- 应用卡片将通过JavaScript动态生成 -->
        </div>

        <div class="actions">
            <button class="action-btn" id="addAppBtn">
                <i class="fas fa-plus"></i> 添加应用
            </button>
            <button class="action-btn" id="editModeBtn">
                <i class="fas fa-edit"></i> 编辑模式
            </button>
        </div>
    </div>

    <!-- 编辑模式指示器 -->
    <div class="edit-mode-indicator">
        <i class="fas fa-edit"></i> 编辑模式已开启 - 拖动应用重新排序
    </div>

    <!-- 添加应用模态框 -->
    <div class="modal" id="addAppModal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>添加新应用</h2>
                <button class="close-modal">&times;</button>
            </div>
            <form id="addAppForm">
                <div class="form-group">
                    <label for="appName">应用名称</label>
                    <input type="text" id="appName" required autocomplete="off">
                </div>
                <div class="form-group">
                    <label for="appUrl">应用链接</label>
                    <input type="url" id="appUrl" required placeholder="https://" autocomplete="off">
                </div>
                <div class="form-group">
                    <label for="appCategory">应用分类</label>
                    <select id="appCategory" required>
                        <option value="ai">AI工具</option>
                        <option value="shopping">购物</option>
                        <option value="video">视频</option>
                        <option value="music">音乐</option>
                        <option value="social">社交</option>
                        <option value="tools">工具</option>
                        <option value="other">其他</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="appIcon">应用图标</label>
                    <select id="appIcon" required>
                        <option value="fas fa-brain">AI图标</option>
                        <option value="fas fa-robot">机器人</option>
                        <option value="fas fa-shopping-cart">购物车</option>
                        <option value="fas fa-shopping-bag">购物袋</option>
                        <option value="fas fa-tags">标签</option>
                        <option value="fas fa-video">视频</option>
                        <option value="fas fa-play-circle">播放</option>
                        <option value="fas fa-tv">电视</option>
                        <option value="fas fa-film">电影</option>
                        <option value="fas fa-music">音乐</option>
                        <option value="fas fa-headphones">耳机</option>
                        <option value="fas fa-cloud-music">云音乐</option>
                        <option value="fas fa-comments">聊天</option>
                        <option value="fas fa-users">用户</option>
                        <option value="fas fa-globe">网站</option>
                        <option value="fas fa-gamepad">游戏</option>
                        <option value="fas fa-newspaper">新闻</option>
                        <option value="fas fa-book">书籍</option>
                        <option value="fas fa-graduation-cap">学习</option>
                    </select>
                </div>
                <button type="submit" class="submit-btn">添加应用</button>
            </form>
        </div>
    </div>

    <!-- 确认删除模态框 -->
    <div class="confirm-modal" id="confirmModal">
        <div class="confirm-content">
            <div class="confirm-icon">
                <i class="fas fa-exclamation-triangle"></i>
            </div>
            <div class="confirm-text" id="confirmText">
                确定要删除这个应用吗？
            </div>
            <div class="confirm-actions">
                <button class="confirm-btn confirm-cancel" id="confirmCancel">取消</button>
                <button class="confirm-btn confirm-delete" id="confirmDelete">删除</button>
            </div>
        </div>
    </div>

    <!-- 提示消息 -->
    <div class="toast" id="toast"></div>

    <script>
        // 初始应用数据
        const initialApps = [
            { id: 1, name: 'DeepSeek', url: 'https://www.deepseek.com', category: 'ai', icon: 'fas fa-brain' },
            { id: 2, name: '豆包', url: 'https://www.doubao.com', category: 'ai', icon: 'fas fa-robot' },
            { id: 3, name: '淘宝', url: 'https://www.taobao.com', category: 'shopping', icon: 'fas fa-shopping-cart' },
            { id: 4, name: '京东', url: 'https://www.jd.com', category: 'shopping', icon: 'fas fa-shopping-bag' },
            { id: 5, name: '拼多多', url: 'https://www.pinduoduo.com', category: 'shopping', icon: 'fas fa-tags' },
            { id: 6, name: '腾讯视频', url: 'https://v.qq.com', category: 'video', icon: 'fas fa-play-circle' },
            { id: 7, name: '哔哩哔哩', url: 'https://www.bilibili.com', category: 'video', icon: 'fas fa-tv' },
            { id: 8, name: '快手', url: 'https://www.kuaishou.com', category: 'video', icon: 'fas fa-video' },
            { id: 9, name: '抖音', url: 'https://www.douyin.com', category: 'video', icon: 'fas fa-film' },
            { id: 10, name: '优酷', url: 'https://www.youku.com', category: 'video', icon: 'fas fa-play' },
            { id: 11, name: '爱奇艺', url: 'https://www.iqiyi.com', category: 'video', icon: 'fas fa-video' },
            { id: 12, name: 'QQ音乐', url: 'https://y.qq.com', category: 'music', icon: 'fas fa-music' },
            { id: 13, name: '汽水音乐', url: 'https://www.qishui.com', category: 'music', icon: 'fas fa-headphones' },
            { id: 14, name: '网易云音乐', url: 'https://music.163.com', category: 'music', icon: 'fas fa-cloud-music' }
        ];

        // DOM元素
        const appsGrid = document.getElementById('appsGrid');
        const categoryBtns = document.querySelectorAll('.category-btn');
        const searchInput = document.getElementById('searchInput');
        const addAppBtn = document.getElementById('addAppBtn');
        const editModeBtn = document.getElementById('editModeBtn');
        const addAppModal = document.getElementById('addAppModal');
        const addAppForm = document.getElementById('addAppForm');
        const closeModalBtn = document.querySelector('.close-modal');
        const toast = document.getElementById('toast');
        const themeBtn = document.getElementById('themeBtn');
        const themeMenu = document.getElementById('themeMenu');
        const settingsBtn = document.getElementById('settingsBtn');
        const settingsMenu = document.getElementById('settingsMenu');
        const addAppOption = document.getElementById('addAppOption');
        const editModeOption = document.getElementById('editModeOption');
        const resetAppsOption = document.getElementById('resetAppsOption');
        const confirmModal = document.getElementById('confirmModal');
        const confirmText = document.getElementById('confirmText');
        const confirmCancel = document.getElementById('confirmCancel');
        const confirmDelete = document.getElementById('confirmDelete');

        // 状态变量
        let apps = [];
        let currentCategory = 'all';
        let isEditMode = false;
        let nextAppId = initialApps.length + 1;
        let appToDelete = null;
        let searchTimeout = null;

        // 初始化应用
        function initApps() {
            const savedApps = localStorage.getItem('userApps');
            if (savedApps) {
                apps = JSON.parse(savedApps);
            } else {
                apps = [...initialApps];
                saveApps();
            }
            renderApps();
        }

        // 保存应用到本地存储
        function saveApps() {
            localStorage.setItem('userApps', JSON.stringify(apps));
        }

        // 渲染应用
        function renderApps(filteredApps = null) {
            const appsToRender = filteredApps || apps;
            appsGrid.innerHTML = '';
            
            appsToRender.forEach(app => {
                if (currentCategory !== 'all' && app.category !== currentCategory) return;
                
                const appCard = document.createElement('div');
                appCard.className = 'app-card';
                appCard.setAttribute('draggable', isEditMode);
                appCard.setAttribute('data-id', app.id);
                
                appCard.innerHTML = `
                    <div class="app-icon">
                        <i class="${app.icon}"></i>
                    </div>
                    <div class="app-name">${app.name}</div>
                    ${isEditMode ? `
                    <div class="app-actions">
                        <button class="app-action-btn delete" title="删除应用" data-id="${app.id}">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                    ` : ''}
                `;
                
                appCard.addEventListener('click', (e) => {
                    // 只有在非编辑模式下才打开链接
                    if (!isEditMode && !e.target.closest('.app-actions')) {
                        window.open(app.url, '_blank');
                    }
                });
                
                appsGrid.appendChild(appCard);
            });
            
            // 添加拖拽功能
            if (isEditMode) {
                initDragAndDrop();
            }
        }

        // 初始化拖拽功能
        function initDragAndDrop() {
            const appCards = document.querySelectorAll('.app-card');
            let draggedItem = null;
            
            appCards.forEach(card => {
                card.addEventListener('dragstart', function(e) {
                    draggedItem = this;
                    setTimeout(() => this.style.opacity = '0.5', 0);
                    e.dataTransfer.effectAllowed = 'move';
                });
                
                card.addEventListener('dragend', function() {
                    setTimeout(() => this.style.opacity = '1', 0);
                    draggedItem = null;
                    document.querySelectorAll('.app-card').forEach(c => {
                        c.classList.remove('drag-over');
                    });
                });
                
                card.addEventListener('dragover', function(e) {
                    e.preventDefault();
                    this.classList.add('drag-over');
                    return false;
                });
                
                card.addEventListener('dragenter', function(e) {
                    e.preventDefault();
                });
                
                card.addEventListener('dragleave', function() {
                    this.classList.remove('drag-over');
                });
                
                card.addEventListener('drop', function(e) {
                    e.stopPropagation();
                    e.preventDefault();
                    
                    if (draggedItem !== this) {
                        const fromId = parseInt(draggedItem.getAttribute('data-id'));
                        const toId = parseInt(this.getAttribute('data-id'));
                        
                        const fromIndex = apps.findIndex(app => app.id === fromId);
                        const toIndex = apps.findIndex(app => app.id === toId);
                        
                        // 交换应用位置
                        [apps[fromIndex], apps[toIndex]] = [apps[toIndex], apps[fromIndex]];
                        saveApps();
                        renderApps();
                    }
                    
                    return false;
                });
            });
        }

        // 过滤应用
        function filterApps() {
            const searchTerm = searchInput.value.toLowerCase().trim();
            
            // 使用防抖优化搜索性能
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(() => {
                if (searchTerm === '') {
                    renderApps();
                    return;
                }
                
                const filteredApps = apps.filter(app => 
                    app.name.toLowerCase().includes(searchTerm) || 
                    app.category.toLowerCase().includes(searchTerm)
                );
                renderApps(filteredApps);
            }, 300);
        }

        // 显示提示消息
        function showToast(message, type = '') {
            toast.textContent = message;
            toast.className = 'toast';
            if (type) {
                toast.classList.add(type);
            }
            toast.classList.add('show');
            setTimeout(() => {
                toast.classList.remove('show');
            }, 3000);
        }

        // 切换主题
        function setTheme(themeName) {
            document.body.className = `theme-${themeName}`;
            localStorage.setItem('selectedTheme', themeName);
        }

        // 初始化主题
        function initTheme() {
            const savedTheme = localStorage.getItem('selectedTheme') || 'dark';
            setTheme(savedTheme);
        }

        // 显示模态框
        function showModal(modal) {
            modal.classList.add('show');
            modal.style.display = 'flex';
        }

        // 隐藏模态框
        function hideModal(modal) {
            modal.classList.remove('show');
            setTimeout(() => {
                modal.style.display = 'none';
            }, 300);
        }

        // 事件监听
        categoryBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                categoryBtns.forEach(b => b.classList.remove('active'));
                btn.classList.add('active');
                currentCategory = btn.getAttribute('data-category');
                renderApps();
            });
        });

        searchInput.addEventListener('input', filterApps);

        addAppBtn.addEventListener('click', () => {
            showModal(addAppModal);
        });

        closeModalBtn.addEventListener('click', () => {
            hideModal(addAppModal);
        });

        editModeBtn.addEventListener('click', () => {
            toggleEditMode();
        });

        function toggleEditMode() {
            isEditMode = !isEditMode;
            document.body.classList.toggle('edit-mode', isEditMode);
            editModeBtn.innerHTML = isEditMode ? 
                '<i class="fas fa-check"></i> 完成编辑' : 
                '<i class="fas fa-edit"></i> 编辑模式';
            editModeOption.innerHTML = isEditMode ? 
                '<i class="fas fa-check"></i> <span>完成编辑</span>' : 
                '<i class="fas fa-edit"></i> <span>编辑模式</span>';
            renderApps();
        }

        addAppForm.addEventListener('submit', (e) => {
            e.preventDefault();
            
            const name = document.getElementById('appName').value;
            const url = document.getElementById('appUrl').value;
            const category = document.getElementById('appCategory').value;
            const icon = document.getElementById('appIcon').value;
            
            const newApp = {
                id: nextAppId++,
                name,
                url,
                category,
                icon
            };
            
            apps.push(newApp);
            saveApps();
            renderApps();
            hideModal(addAppModal);
            addAppForm.reset();
            showToast(`应用 "${name}" 添加成功！`, 'success');
        });

        // 事件委托处理删除应用
        appsGrid.addEventListener('click', (e) => {
            if (e.target.closest('.app-action-btn.delete')) {
                const appId = parseInt(e.target.closest('.app-action-btn').getAttribute('data-id'));
                appToDelete = apps.find(app => app.id === appId);
                
                if (appToDelete) {
                    confirmText.textContent = `确定要删除 "${appToDelete.name}" 吗？`;
                    showModal(confirmModal);
                }
            }
        });

        // 确认删除
        confirmDelete.addEventListener('click', () => {
            if (appToDelete) {
                const appIndex = apps.findIndex(app => app.id === appToDelete.id);
                
                if (appIndex !== -1) {
                    const appName = apps[appIndex].name;
                    apps.splice(appIndex, 1);
                    saveApps();
                    renderApps();
                    hideModal(confirmModal);
                    showToast(`应用 "${appName}" 已删除`, 'error');
                }
            }
        });

        // 取消删除
        confirmCancel.addEventListener('click', () => {
            hideModal(confirmModal);
            appToDelete = null;
        });

        // 点击模态框外部关闭
        window.addEventListener('click', (e) => {
            if (e.target === addAppModal) {
                hideModal(addAppModal);
            }
            if (e.target === confirmModal) {
                hideModal(confirmModal);
                appToDelete = null;
            }
        });

        // 主题切换
        themeBtn.addEventListener('click', () => {
            themeMenu.classList.toggle('show');
        });

        // 设置菜单
        settingsBtn.addEventListener('click', () => {
            settingsMenu.classList.toggle('show');
        });

        // 主题选项点击
        document.querySelectorAll('.theme-option').forEach(option => {
            option.addEventListener('click', () => {
                const theme = option.getAttribute('data-theme');
                setTheme(theme);
                themeMenu.classList.remove('show');
            });
        });

        // 设置选项点击
        addAppOption.addEventListener('click', () => {
            showModal(addAppModal);
            settingsMenu.classList.remove('show');
        });

        editModeOption.addEventListener('click', () => {
            toggleEditMode();
            settingsMenu.classList.remove('show');
        });

        resetAppsOption.addEventListener('click', () => {
            if (confirm('确定要重置所有应用吗？这将删除您添加的所有应用。')) {
                apps = [...initialApps];
                nextAppId = initialApps.length + 1;
                saveApps();
                renderApps();
                showToast('应用已重置为初始状态', 'success');
            }
            settingsMenu.classList.remove('show');
        });

        // 点击页面其他区域关闭菜单
        document.addEventListener('click', (e) => {
            if (!e.target.closest('.theme-selector')) {
                themeMenu.classList.remove('show');
            }
            if (!e.target.closest('.settings')) {
                settingsMenu.classList.remove('show');
            }
        });

        // 键盘快捷键
        document.addEventListener('keydown', (e) => {
            // ESC键关闭模态框
            if (e.key === 'Escape') {
                if (addAppModal.style.display === 'flex') {
                    hideModal(addAppModal);
                }
                if (confirmModal.style.display === 'flex') {
                    hideModal(confirmModal);
                }
            }
            
            // Ctrl+E切换编辑模式
            if (e.ctrlKey && e.key === 'e') {
                e.preventDefault();
                toggleEditMode();
            }
            
            // Ctrl+N添加应用
            if (e.ctrlKey && e.key === 'n') {
                e.preventDefault();
                showModal(addAppModal);
            }
        });

        // 初始化应用
        initApps();
        initTheme();
    </script>
</body>
</html>